<template>
    <div class="container">
      <div class="content">
        <component :is="componentTag" @changeTag='changeTag'></component>
      </div>
      <!-- 用户名&&电源 -->
      <div class="bottomMenu">
        <!-- 左侧头像和用户名 -->
        <div class="user">
          <el-avatar icon="el-icon-user-solid" size="medium"></el-avatar>
          <p>username</p>
        </div>
        <!-- 右侧电源按钮 -->
        <i class="shutdown"></i>
      </div>
    </div>
</template>

<script>
import { ref } from '@vue/runtime-core';
import Pinned from './components/pinned.vue'
import AllApps from './components/allApps.vue'
export default {
  components:{
    Pinned,
    AllApps
  },
  setup(){
    const componentTag = ref('Pinned')
    const changeTag = () => {
      componentTag.value=componentTag.value==='Pinned'?'AllApps':'Pinned'
    }
    // 阻止事件冒泡，防止关闭开始菜单
    const aaa =()=>{

    }
    return {
      componentTag,
      changeTag,
      aaa
    }
  }
};
</script>

<style lang='scss' scoped>
.container {
  height: 100%;
  .content{
    box-sizing: border-box;
    height: calc(100% - 54px);
    padding: 30px 48px;
  }
  .bottomMenu{
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 54px;
    background: rgba(175, 175, 175, 0.1);
    padding: 0 48px;
  }
}
.bottomMenu{
  .user{
    height: 100%;
    font-size: 14px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    .el-avatar{
      margin-right: 10px;
    }
  }
  .shutdown{
    width: 22px;
    height: 22px;
    background-image: url('../../assets/img/icon/ui/power.png');
    background-repeat: no-repeat;
    background-size: 90%;
    cursor: pointer;
    filter: invert(1);
  }
}
</style>